<template>
<div class="content_item_box">
<el-col >
    <el-row class="content_title"
    :gutter="2">
        <el-col :span="5" 
        class="content_img_out">
            <img :src="dataObj.icon"
            class="content_img"/>
        </el-col>
        <el-col :span="19" class="content_title_txt">
            <span class="content_title_txt_span">
                {{ dataObj.name }}
            </span>
        </el-col>
    </el-row>
    <el-row class="content_content">
        <span class="content_content_span">
            {{ dataObj.desc }}
        </span>
    </el-row>
    <el-row>
        <div class="content_return_icon">
            <svg-icon name="returnicon"
            :size="35"
            color="blue"/>
        </div>
    </el-row>
</el-col>

</div>
</template>

<script setup>

const {dataObj} = defineProps([
    'dataObj'
])
</script>

<style scoped>
.content_item_box {
    border: 1px solid black;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    cursor: pointer;
}

.search-content-box-li :hover  .content_return_icon{
    visibility: visible;
}
.content_title {
    height: 40%;
    margin-top: 20px;
}
.content_img {
    width: 45px;
    height: 45px;
}
.search-content-box-li :hover content_item_box{
    box-shadow: 2px 2px 10px blue;
    bottom: 10px;
}
.content_title_txt_span{
    font-weight: bold;
}
.content_content {
    height: 40%;
    margin-top: 10px;
    text-align: left;
}
.content_content_span{
    font-size: 15px;
}
.content_return_icon {
    text-align: right;
    width: 94%;
    margin-top: 10px;
    visibility: hidden;
}

</style>